import React, { PureComponent } from 'react';
import { formatMessage, setLocale, getLocale } from 'umi/locale';
import { Input } from 'antd';

export default class OptionInupt extends PureComponent {
  static getDerivedStateFromProps(nextProps) {
    // Should be a controlled component.
    if ('value' in nextProps) {
      return {
        ...(nextProps.value || {}),
      };
    }
    return null;
  }

  constructor(props) {
    super(props);

    const value = props.value || {};
    this.state = {
      firstOption: value.firstOption || '',
      secondOption: value.secondOption || '',
    };
  }

  handleFirstOptionChange = (e) => {
    const firstOption = e.target.value;
    if (!('value' in this.props)) {
      this.setState({ firstOption });
    }
    this.triggerChange({ firstOption });
  }

  handleSecondOptionChange = (e) => {
    const secondOption = e.target.value;
    if (!('value' in this.props)) {
      this.setState({ secondOption });
    }
    this.triggerChange({ secondOption });
  }

  triggerChange = (changedValue) => {
    // Should provide an event to pass value to Form.
    const onChange = this.props.onChange;
    if (onChange) {
      onChange(Object.assign({}, this.state, changedValue));
    }
  }

  render() {
    const { size } = this.props
    const state = this.state;
    return (
      <div style={{ display: `inline`, width: `80%` }}>
        <Input 
          // size={size}
          value={state.firstOption}
          style={{ display: `inline`, width: `30%` }}
          onChange={this.handleFirstOptionChange} 
        />
        &nbsp;&nbsp;--&nbsp;&nbsp;
        <Input 
          // size={size}
          style={{ display: `inline`, width: `58%` }}
          value={state.secondOption}
          onChange={this.handleSecondOptionChange}
        />
      </div>
    )
  }
}



